<template>
  <el-dialog 
  v-model="dialogFormVisible" 
  title="修改管理员" 
  top="30px"
  :close-on-click-modal="false">
    <div class="info-body">
        <el-form :model="form" :rules="addFormRules" class="form-info">
            <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
                <el-input v-model="form.name" />
            </el-form-item> 
            <el-form-item label="账号" prop="account" :label-width="formLabelWidth">
                <el-input v-model="form.account" />
            </el-form-item>
            <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
                <el-input v-model="form.password" />
            </el-form-item>
            <el-form-item label="职位" prop="position" :label-width="formLabelWidth">
                <el-select v-model="form.position" >
                <el-option value="管理客户" />
                <el-option value="管理送水工" />
                <el-option value="计算工资" />
                <el-option value="管理员" />
                </el-select>
            </el-form-item>
            <el-form-item label="权限" prop="authority" :label-width="formLabelWidth">
                <el-select v-model="form.authority" >
                <el-option value="超级管理员" />
                <el-option value="普通管理员" />
                </el-select>
            </el-form-item>

            <el-form-item label="照片" prop="picture" :label-width="formLabelWidth">
                <el-upload
                class="upload-image"
                action=""
                v-model="form.picture"
                :limit="2" 
                :file-list="fileList"
  				:auto-upload="false" 
  				:on-change="getLocalImg"
                :on-remove="handleRemove">
                <el-button type="primary">点击上传照片</el-button>
                </el-upload>
            </el-form-item>    
        </el-form>

        <div class="demo-image">
            <el-image
            style="width: 195px; height: 230px"
            :src="image_url"
            :fit="fit">
                <template #error>
                <div class="image-slot">
                    <el-icon><avatar /></el-icon>
                </div>
                </template>
            </el-image>
            
        </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitModifyInfo">修改</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                dialogFormVisible: false,
                formLabelWidth: '100px',
                id:'',
                image_url: '',
                old_picture:'',
                form: {
                name: '',
                account: '',
                password: '',
                position: '',
                authority: '',
                picture:''
                },
                //
                // addFormRules:{
                //     name: {
                //         required: true, message: "请输入名字", trigger: 'blur'
                //     },
                //     account: {
                //         required: true, message: "请输入账号", trigger: 'blur'
                //     },
                //     password: {
                //         required: true, message: "请输入密码", trigger: 'blur'
                //     },
                //     picture: {
                //         required: true, message: "请上传照片", trigger: 'blur'
                //     }
                // }
                
            };
        },
        methods: {
            //显示对话框
            dialogShow(id){
                this.dialogFormVisible=true;
                this.id=id;
                this.getModifyAdminInfo();
            },
            //显示信息
            getModifyAdminInfo(){
                this.fileList=[];
                var that=this;
                this.axios
                .get("/admininfo/getModifyAdminInfo?id="+this.id)
                .then(function (response) {
                    that.form=response;
                    that.image_url=response.picture;
                    that.old_picture=response.picture;
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            //提交修改信息
            submitModifyInfo(){
                var that = this;
                let params = {
                    id:this.id,
                    name:this.form.name,
                    account:this.form.account,
                    password:this.form.password,
                    authority:(this.form.authority=="超级管理员"?"a":"b"),
                    position:this.form.position,
                    picture:this.form.picture
                };
                this.axios
                .post("/admininfo/modifyAdminInfo", params)
                .then(function(response){
                    that.dialogFormVisible = false;
                    that.$emit("updateData");
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            //预览图像
            getLocalImg(file,fileList){
                //检查图片格式
                const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
                const whiteList = ["jpg", "png", "jpeg", "PNG", "JPG"];
                if (whiteList.indexOf(fileSuffix) === -1) {
                    this.$message.error('上传文件只能是图片格式');
                    this.fileList=[];
                    return false;
                }
                //覆盖前一个文件
                if (fileList.length > 1) {
                    fileList.splice(0, 1);
                }
				//预览图片，图片数据写入this.form.picture
                const fileReader = new FileReader();
                fileReader.onload = (ev) => {
                    const dataImg = ev.target.result;
                    this.image_url = dataImg;
                    this.form.picture=dataImg;
                 };
                fileReader.readAsDataURL(file.raw);
			},
            //删除上传文件触发
            handleRemove (file, fileList) {
                this.image_url=this.old_picture;
                this.form.picture=this.old_picture;
            },
        },
        mounted(){

        }
    };
</script>
<style scoped>
.info-body{
    display: flex;
    justify-content: space-around;
}
.form-info{
    display: flex;
    flex-direction: column;
}
.upload-image{
    width: 200px;
    text-align: left;
}
.image-slot{
    font-size: 40px;
    line-height: 200px;
}
</style>
